<template>
  <div>
    <div class="flex justify-between">
      <div>
        <span class="mr-[26px] text-[16px] text-[#fff]">日期</span>

        <a-range-picker v-model:value="date" format="YYYY-MM-DD" @change="getData" />
      </div>
      <div class="flex items-center cursor-pointer" @click="exportData">
        <img src="@/assets/images/export_img.png" class="w-[117px] h-[37px]" />
        <!-- <span class="text-[16px] ml-[6px] text-[#53DCFF]">导出报告</span> -->
      </div>
    </div>
    <div class="w-[100%] mt-[20px]">
      <!-- <CustomTitle title="表金属杂质检测数据" /> -->
      <a-table
        id="tableRef"
        :scroll="{ y: 270, x: '100%' }"
        ref="tableRef"
        :loading="loading"
        class
        :pagination="false"
        :columns="columns"
        :data-source="tableData"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'index'"> {{ record.index }}</template>
          <template v-if="column.dataIndex === 'msg'"> {{ record.msg }}</template>
          <template v-if="column.dataIndex === 'time'"> {{ dayjs(record.time).format('YYYY-MM-DD HH:mm:ss') }}</template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { apiGetAlarmHistory } from '@/http/api';
import dayjs, { Dayjs } from 'dayjs';
import { onBeforeMount, ref } from 'vue';

// import { default_columns } from './columns';
const date = ref<any>([dayjs().subtract(6, 'day'), dayjs()]);

const columns: any = ref([]);
const tableData = ref<any[]>([]);
const loading = ref(false);
const tableRef = ref('');
// const route = useRoute();

// let measurement: string = '';
// let sampling_pt: string = '';
const getData = async () => {
  const res: any = {
    statement_id: 0,
    series: [
      {
        name: '',
        columns: [
          // 'time', 'CH4', 'CO', 'CO2', 'H2', 'N2', 'O2+Ar', 'point'
        ],
        values: [
          // [1711934005000, 6, 4, 5, 70, 2, 3, '取样点1'],
          // [1711934014000, 6, 4, 5, 60, 2, 3, '取样点1'],
        ],
      },
    ],
  };
  try {
    loading.value = true;

    await apiGetAlarmHistory({
      start: (date.value[0] as Dayjs).toDate(),
      end: (date.value[1] as Dayjs).toDate(),
      type: 0,
    });
  } catch (error) {
    if ((error as any).results) {
      res.series[0].columns = (error as any).results[0].series
        ? (error as any).results[0].series[0].columns.splice(0, (error as any).results[0].series[0].columns.length - 1)
        : [];
      res.series[0].columns.push('index');
      // res.series[0].columns.reverse();
      res.series[0].columns.forEach((v: any) => {
        columns.value.push({
          title: v === 'time' ? '时间' : v === 'index' ? '序号' : v === 'msg' ? '消息' : v,
          dataIndex: v,
          key: v,
        });
      });
      res.series[0].values = (error as any).results[0].series ? (error as any).results[0].series[0].values : [];

      res.series[0].values.forEach((v: any[], i: number) => {
        // v.revers
        tableData.value.push({
          id: v[0],
          ...Object.fromEntries(
            v.map((item, index) => {
              return [res.series[0].columns[index], res.series[0].columns[index] === 'index' ? i + 1 : item];
            })
          ),
        });
      });
    }
  } finally {
    loading.value = false;
  }
};

const exportData = () => {};
defineExpose({
  refresh: getData,
});
const queryData = async () => {
  getData();
};
onBeforeMount(() => {
  // const data = route.query;
  // if (data) {
  //   measurement = data.measurement! as string;
  //   sampling_pt = data.sampling_pt! as string;
  // }
  queryData();
});
</script>
<style lang="scss" scoped></style>
